import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { Avatar, NavBar, Image as MyImage } from "antd-mobile";
import $fetch from "../../../utils/app/$fetch";
import moment from "moment";
import "./style.scss";

const PersonDetail = () => {
  const location: any = useLocation();
  const memberId = location?.state?.memberId;
  const [personDetail, setPersonDetail]: any = useState({});

  useEffect(() => {
    if (!memberId) return;
    initPage();
  }, []);

  // 当 personDetail 数据更新时进行图片预加载
  useEffect(() => {
    if (Object.keys(personDetail).length > 0) {
      const img: any = new Image();
      img.src = personDetail?.memberFormulPhoto;
    }
  }, [personDetail]);

  const initPage = async () => {
    const res = await $fetch(`member/memberDetail/${memberId}`);

    setPersonDetail(res);
  };

  const back = () => {
    window.history.go(-1);
  };

  return (
    <div className="container_person_detail">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={back}
      >
        成员列表
      </NavBar>
      <div className="that_person_detail">
        <Avatar src={personDetail?.memberFullPhoto}></Avatar>
        <h3>{personDetail?.memberName}</h3>
        <div className="that_detail">
          <div>血型：{personDetail?.memberBloodType}</div>
          <div>生日：{moment(personDetail?.memberBirth).format('YYYY年MM月DD日')}</div>
          <div>担当色：{personDetail?.memberColor}</div>
        </div>
      </div>
    </div>
  );
};

export default PersonDetail;
